<template>
	<view class="roc-radio">
		<u-radio-group v-model="radioValue" :disabled="item.props.disabled || false">
			<u-radio
				v-for="(radioItem, radioindex) in radioList"
				:key="radioindex"
				:label="radioItem.label"
				:name="radioItem.value"
				:iconSize="26"
				:size="28"
				:labelSize="28"
			></u-radio>
		</u-radio-group>
	</view>
</template>

<script>
import { apiapi } from '@/api/request.js';
export default {
	name: 'roc-radio',
	props: {
		item: {
			type: Object,
			default() {
				return {};
			}
		},
		value: {
			type: [String, Number],
			default: ''
		}
	},
	data() {
		return {
			radioValue: '',
			radioList: []
		};
	},
	watch: {
		value(newVal) {
			this.radioValue = newVal;
		},
		radioValue(newVal) {
			this.$emit('input', newVal);
		}
	},
	async created() {
		if (this.item.options == undefined) {
			// 接口数据
			if (
				this.item.effect.fetch != '' &&
				this.item.effect.fetch.action != undefined &&
				this.item.effect.fetch.action != ''
			) {
				const {
					data: { data }
				} = await apiapi(this.item.effect.fetch.action, 'POST', {});
				this.radioList = data;
			} else {
				this.$u.toast(`${this.item.title}, 配置错误`);
			}
		} else {
			// 静态数据
			this.radioList = this.item.options;
		}
	}
};
</script>

<style lang="scss">
.roc-radio {
	width: 100%;
}
.u-radio {
	margin-right: 22rpx;
	margin-bottom: 20rpx;
}
.u-radio-group {
	flex-wrap: wrap;
}
</style>
